<template>
    <div>
        <h2>客服列表</h2>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
        <div style="margin-bottom: 14px;">
            <el-button type="primary" @click="openDialog()" >添加客服</el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData.rows" style="width: 100%" 
        :header-cell-style="{
            backgroundColor: '#e5eeff', color: '#515a6e', fontWeight: 'normal'
        }">
            <el-table-column label="ID" prop="_id" width="300"/>
            <el-table-column label="客服头像" prop="avatar" >
                <template #default="score">
                    <div class="block">
                        <el-avatar :size="50" :src="score.row.avatar" shape="square" />
                    </div>
                </template>
           </el-table-column>
            <el-table-column label="客服名称" prop="name" />
            <el-table-column label="客服状态" prop="state">
                <template #default="{row}">
                    <el-switch v-model="row.state" inline-prompt  active-text="开启" :active-value="1" :inactive-value="0"
                inactive-text="关闭"/>
                </template>
            </el-table-column>l-table-column>
            <el-table-column label="添加时间" prop="name" width="190">
                <template #default="scope">
                   <span>2024-10-25 11:59:19</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300">
                <template #default="scope">
                    <el-button size="small" text type="primary" @click="openDialog(scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" text type="danger"  @click="SureDeleteBefore(scope.row)">
                        删除,..
                    </el-button>
                    <el-button size="small" text type="danger" >
                        进入工作台
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page-container">
            <el-pagination :page-sizes="[5, 10, 15, 20]" 
            v-model:current-page="pageData.currentPage"
            v-model:page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
               :background="true"/>
        </div>
    </el-card>
    <!-- 弹窗 -->
    <ServerListDia @getServerData="getServerData"   ref="dialogRef"/>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted, useTemplateRef,watch} from 'vue';
import api from '../../api';
import { ElMessage, ElMessageBox } from 'element-plus';
import ServerListDia from '../../components/dialog/ServerListDia.vue';
const tableData=ref({
    rows:[],
    total:0
})
const pageData=ref({
    currentPage:1,
    pageSize:5
})
const dialogRef=useTemplateRef<InstanceType<typeof ServerListDia>>("dialogRef")
// 双向绑定的数据
//  let ruleForm = ref({})
// 发送请求获取客服数据
const getServerData=async()=>{
    const res=await api.servers.search(pageData.value)
    if(res.code==200){
        console.log(res);
        tableData.value.rows=res.data.rows
        tableData.value.total=res.data.total
    }
}
// 点击删除
// 删除前确认删除
const SureDeleteBefore=(data:any)=>{
    console.log(data._id);
    ElMessageBox.confirm(
    '您确认删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(()=>{
    console.log("进来了吗");
    handleDelete(data)
    ElMessage.success("客服删除成功")
  })
}
// 删除客服
const handleDelete = async (data:any) => {
    console.log("哈哈哈哈哈哈");
    
    const res = await api.courierManage.remove({ _id: data._id})
    if (res.code == 200) {
        console.log(res,"删除");
       getServerData()
    }
}
// let ruleForm=useTemplateRef("ruleForm")
//添加客服打开弹窗
const openDialog=(data?:any)=>{
    dialogRef.value!.openDialog(data)
}
watch(pageData, () => {
    getServerData()
},
{
    deep:true
})

onMounted(()=>{
    getServerData()
})


</script>

<style scoped>
.page-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>